<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;
            display: flex;flex-direction: column;justify-content: space-between;
        }
        span{
            display: block;width: 150px;height: 150px;background: pink;
        }

        .top{
            display: flex;justify-content: space-between;
        }
        .bottom{
            display: flex;justify-content: space-between;
        }
        p{position: absolute;margin: 0;width: 300px;background: #efefef;left:0;top:0;z-index: 1;display: none;}

    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <span></span>
            <p>这是左上角</p>
            <span></span>
            <p>这是右上角</p>
            <p></p>
        </div>
        <div class="bottom">
            <span></span>
            <p>这是左下角</p>
            <span></span>
            <p>这是右下角</p>
        </div>
    </div>
    <div id="div1"></div>
</body>
<script>
    // 获取元素
    var aspan=document.querySelectorAll("span");
    var ap=document.querySelectorAll("p");
    for(i=0;i<aspan.length;i++){
        aspan[i].onmouseover=function(){
            this.nextElementSibling.style.display = "block";
        }
        aspan[i].onmouseout=function(){
            this.nextElementSibling.style.display = "none";
        }

        aspan[i].onmousemove=function(eve){
            var e=eve||window.event;
            this.nextElementSibling.style.left = e.pageX+10+ "px";
            this.nextElementSibling.style.top = e.pageY+10+ "px";
        }
    }
</script>
</html>